<template>
    <div class="page-box">
        <Card>
            <Button size="small" type="primary" @click="returnDaily">返回</Button>
            <el-table
                :data="data"
                height="calc(100vh - 195px)"
                border
                class="margin-top-5"
                style="width: 100%"
                size="mini"
                highlight-current-row
                :header-cell-style="headerCellStyle"
                oncontextmenu="return false;"
                ref="multipleTable"
                sortable="custom"
                empty-text="暂无数据"
                v-loading="dataLoading"
                show-summary
                :summary-method="getSummaries"
                :span-method="objectSpanMethod"
                @sort-change="onTableSort">
                <el-table-column type="index" align="center" label="序号" width="55" fixed>
                    <template slot-scope="scope">{{
                            (scope.row.index)
                        }}
                    </template>
                </el-table-column>
                <el-table-column
                    v-for="(item, key) in columns"
                    :key="key"
                    :prop="item.key"
                    :label="item.title"
                    :width="item.width"
                    align="center"
                    :formatter="item.formatter"
                    :sortable="item.sortable"
                    :show-overflow-tooltip="true"
                    :fixed="item.fixed"
                >
                    <template slot-scope="scope">
                        <template v-if="item.type !== 'template'">
                            {{ $table.tableRowFormat(scope.row, item) }}
                        </template>
                    </template>
                </el-table-column>
                <el-table-column label="操作" header-align="center" align="center" width="100">
                    <template slot-scope="scope">
                        <el-button v-if="scope.row.type === 'in'" style="color: #4f68e8" size="small" type="text"
                                   @click="clickNode('in',scope.row)">查看详情
                        </el-button>
                        <el-button v-if="scope.row.type === 'out'" style="color: #4f68e8" size="small" type="text"
                                   @click="clickNode('out',scope.row)">查看详情
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
            <Row class="margin-top-10">
                <Page :total="total" :current="listQuery.pageNum" :page-size="listQuery.pageSize"
                      :page-size-opts="listQuery.pageOptionsList"
                      size="small" @on-change="pageChange" @on-page-size-change="pageSizeChange" show-elevator
                      show-sizer></Page>
            </Row>
        </Card>
    </div>
</template>

<script>
import {
    inStockBusinessNumList,
    inStockBusinessNumListSum,
    outStockBusinessNumList,
    outStockBusinessNumListSum
} from '@/api/warehouse/home.js';

export default {
    name: 'ContainerNoInfo',
    data() {
        return {
            totalData: {},
            sumData: {},
            data: [],
            columns: [],
            inColumns: [
                {
                    key: 'endInTime',
                    title: '业务日期',
                    width: 150,
                    type: 'date',
                    fixed: true
                },
                {
                    key: 'ownerName',
                    title: '货主',
                    width: 200,
                    fixed: true
                },
                {
                    key: 'manageName',
                    title: '运营公司',
                    width: 180,
                    fixed: true
                },
                {
                    key: 'businessNum',
                    title: '箱号',
                    width: 120,
                    fixed: true
                },
                {
                    key: 'businessType',
                    title: '业务类型',
                    width: 120
                },
                {
                    key: 'matType',
                    title: '品类',
                    width: 120
                },
                {
                    key: 'matName',
                    title: '品名',
                    width: 120
                },
                {
                    key: 'realWeight',
                    title: '重量/KG',
                    width: 120
                },
                {
                    key: 'realQty',
                    title: '件数/件',
                    width: 120
                },
                {
                    key: 'realTrace',
                    title: '托数',
                    width: 120
                }
            ],
            outColumns: [
                {
                    key: 'endInTime',
                    title: '业务日期',
                    width: 150,
                    type: 'date',
                    fixed: true
                },
                {
                    key: 'ownerName',
                    title: '货主',
                    width: 170,
                    fixed: true
                },
                {
                    key: 'manageName',
                    title: '运营公司',
                    width: 180,
                    fixed: true
                },
                {
                    key: 'carNo',
                    title: '车号',
                    width: 120,
                    fixed: true
                },
                {
                    key: 'businessNum',
                    title: '箱号',
                    width: 120,
                },
                {
                    key: 'businessType',
                    title: '业务类型',
                    width: 120
                },
                {
                    key: 'matType',
                    title: '品类',
                    width: 120
                },
                {
                    key: 'matName',
                    title: '品名',
                    width: 120
                },
                {
                    key: 'realWeight',
                    title: '重量/KG',
                    width: 120
                },
                {
                    key: 'realQty',
                    title: '件数/件',
                    width: 120
                },
                {
                    key: 'realTrace',
                    title: '托数',
                    width: 120
                }
            ],
            dataLoading: false,
            total: 0,
            spanArr: [],
            pos: 0,
            listQuery: {
                pageNum: this.$store.state.sysSettings.pageNum,
                pageSize: this.$store.state.sysSettings.pageSize,
                pageOptionsList: this.$store.state.sysSettings.pageOptionsList,
                filterList: [],
                sortList: [],
                searchKey: ''
            },
        };
    },
    computed: {
        headerCellStyle() {
            return {
                fontSize: `${12}px`,
                fontWeight: 'bold',
                color: '#8c8c90',
                backgroundColor: 'rgb(239, 243, 247)',
            };
        }
    },
    methods: {
        returnDaily() {
            this.$router.back()
        },
        clickNode(val, row) {
            this.$router.push({
                path: 'traceInfo',
                query: {
                    type: val,
                    time: row.time,
                    whCode: row.whCode,
                    ownerCode: row.ownerCode,
                    manageCompanyCode: row.manageCompanyCode,
                    businessNum: row.businessNum,
                    carNo: row.carNo,
                    outPlanNum: row.outPlanNum,
                    wmsUrl: this.$route.query.wmsUrl
                }
            });
        },
        initGridData() {
            if (this.$route.query) {
                this.spanArr = [];
                this.pos = 0;
                // 接收传参
                let item = this.$route.query;
                this.listQuery.filterList.push({
                    filterKey: 'whCode',
                    filterValue: item.whCode
                });
                this.listQuery.filterList.push({
                    filterKey: 'time',
                    filterValue: item.time
                });
                this.listQuery.filterList.push({
                    filterKey: 'ownerCode',
                    filterValue: item.ownerCode
                });
                this.listQuery.filterList.push({
                    filterKey: 'manageCompanyCode',
                    filterValue: item.manageCompanyCode
                });
                this.dataLoading = true;
                if (item.type == 'in') {
                    inStockBusinessNumList(this.listQuery, this.$route.query.wmsUrl).then(response => {
                        this.dataLoading = false;
                        if (response.data.returnCode === 200) {
                            this.data = response.data.returnData.pageInfo.list;
                            this.total = response.data.returnData.pageInfo.total;
                            this.getSpanArr(this.data);
                            this.$nextTick(() => {
                                this.$refs.multipleTable.doLayout();
                            });
                        } else {
                            this.$error(response.data.returnMsg, 3);
                        }
                    }).catch(err => {
                        console.log(err);
                        this.dataLoading = false;
                        this.$loginOut();
                    });
                    this.getSumInfo(item);
                } else {
                    outStockBusinessNumList(this.listQuery, this.$route.query.wmsUrl).then(response => {
                        this.dataLoading = false;
                        if (response.data.returnCode === 200) {
                            this.data = response.data.returnData.pageInfo.list;
                            this.total = response.data.returnData.pageInfo.total;
                            this.getSpanArr(this.data);
                            this.$nextTick(() => {
                                this.$refs.multipleTable.doLayout();
                            });
                        } else {
                            this.$error(response.data.returnMsg, 3);
                        }
                    }).catch(err => {
                        console.log(err);
                        this.dataLoading = false;
                        this.$loginOut();
                    });
                    this.getSumInfo(item);
                }
            }
        },
        getSpanArr(data) {
            let type = this.$route.query.type;
            for (let i = 0; i < data.length; i++) {
                let key = type === 'in' ? 'businessNum' : 'carNo';
                if (i === 0) {
                    this.spanArr.push(1);
                    this.pos = 0;
                } else {
                    if (data[i][key] === data[i - 1][key]) {
                        this.spanArr[this.pos] += 1;
                        this.spanArr.push(0);
                    } else {
                        this.spanArr.push(1);
                        this.pos = i;
                    }
                }
            }
            let index = 0;
            for (let n in this.spanArr) {
                if (this.spanArr[n] > 0) {
                    index += 1;
                    this.$set(this.data[n], 'index', index);
                }
            }
        },
        objectSpanMethod({ row, column, rowIndex, columnIndex }) {
            if (columnIndex === 0 || columnIndex === 1 || columnIndex === 2 || columnIndex === 3 || columnIndex === 4 || columnIndex === 12) {
                const _row = this.spanArr[rowIndex];
                const _col = _row > 0 ? 1 : 0;
                return {
                    rowspan: _row,
                    colspan: _col
                };
            }
        },
        getSumInfo(item) {
            if (item.type == 'in') {
                inStockBusinessNumListSum(this.listQuery, this.$route.query.wmsUrl).then(response => {
                    if (response.data.returnCode === 200) {
                        this.totalData = response.data.returnData.map;
                    } else {
                        this.$error(response.data.returnMsg, 3);
                    }
                }).catch(err => {
                    console.log(err);
                });
            } else {
                outStockBusinessNumListSum(this.listQuery, this.$route.query.wmsUrl).then(response => {
                    if (response.data.returnCode === 200) {
                        this.totalData = response.data.returnData.map;
                    } else {
                        this.$error(response.data.returnMsg, 3);
                    }
                }).catch(err => {
                    console.log(err);
                });
            }
        }
        ,
        selectionChange(selection) {
            this.selectDataList = selection;
        }
        ,
        getSummaries(param) {
            const { columns, data } = param;
            const sums = [];
            columns.forEach((column, index) => {
                if (index === 0) {
                    sums[index] = '合';
                    return;
                }
                if (this.$route.query) {
                    let type = this.$route.query.type;
                    if (type === 'in') {
                        if (index === 8 || index === 9 || index === 10) {
                            const values = data.map(item => Number(item[column.property]));
                            if (!values.every(value => isNaN(value))) {
                                switch (index) {
                                    case 8:
                                        sums[index] = this.totalData.sumRealWeight + 'KG';
                                        break;
                                    case 9:
                                        sums[index] = this.totalData.sumRealQty + '件';
                                        break;
                                    case 10:
                                        sums[index] = this.totalData.sumTrace + '托';
                                        break;
                                }
                            } else {
                                sums[index] = '';
                            }
                        }
                    } else {
                        if (index === 9 || index === 10 || index === 11) {
                            const values = data.map(item => Number(item[column.property]));
                            if (!values.every(value => isNaN(value))) {
                                switch (index) {
                                    case 9:
                                        sums[index] = this.totalData.sumRealWeight + 'KG';
                                        break;
                                    case 10:
                                        sums[index] = this.totalData.sumRealQty + '件';
                                        break;
                                    case 11:
                                        sums[index] = this.totalData.sumTrace + '托';
                                        break;
                                }
                            } else {
                                sums[index] = '';
                            }
                        }
                    }
                }
            });
            return sums;
        }
        ,
        // 排序
        onTableSort(result) {
            if (result.order === 'descending') {
                let sortItem = {
                    sortKey: result.prop,
                    sortValue: 'desc'
                };
                this.listQuery.sortList = [sortItem];
            } else if (result.order === 'ascending') {
                let sortItem = {
                    sortKey: result.prop,
                    sortValue: 'asc'
                };
                this.listQuery.sortList = [sortItem];
            } else {
                this.listQuery.sortList = [];
            }
            this.initGridData();
        }
        ,
        // 改变页数,
        pageChange(pageNum) {
            this.listQuery.pageNum = pageNum;
            this.initGridData();
        }
        ,
        // 改变条数
        pageSizeChange(pageSize) {
            this.listQuery.pageSize = pageSize;
            this.initGridData();
        }
    },
    mounted() {
        if (this.$route.query) {
            let type = this.$route.query.type;
            this.columns = type === 'in' ? this.inColumns : this.outColumns;
        }
        this.initGridData();
    }
};
</script>

<style scoped lang="less">
@import '../common.less';

</style>
